<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <gui:resources components="['autoComplete']" mode="debug"/>
    <title>AutoComplete Demo</title>
    
</head>

<body>
    <h1>Autocomplete demo</h1>

    <div style="width: 300px">
        <h2>Local autoComplete</h2>
<gui:autoComplete
        id="localData"
        width="300px"
        options="['red','blue','yellow','orange','purple']"
        useShadow="true"
/>

        <h2>Server call for autoComplete</h2>
<gui:autoComplete
        id="testControl"
        resultName="TestData"
        labelField="description"
        idField="id"
        width="300px"
        controller="demo"
        action="testFruitDataAsJSON"
        useShadow="true"
        queryDelay="0.2"
/>

        <h2>Filtering</h2>
        <p>This on restricts results using <em>filter</em> and <em>filterBy</em></p>
<gui:autoComplete
        id="restrictedControl1"
        resultName="TestData"
        labelField="description"
        idField="id"
        controller="demo"
        action="testBeerDataAsJSON"
        filterBy="link"
        filter="1"
        forceSelection="true"
        useShadow="true"
/>

        <p>This on restricts results using <em>queryAppend</em></p>
<gui:autoComplete
        id="restrictedControl2"
        resultName="TestData"
        labelField="description"
        idField="id"
        controller="demo"
        action="testBeerDataAsJSON"
        queryAppend="link=3"
        forceSelection="true"
        useShadow="true"
/>
    </div>
    
    <h2>Dependency</h2>
        
    <div style="border: solid 1px black; background: #C5F5FF; padding: 20px; width: 300px">
        <p>The second autoComplete tag in this box depends on the value of the first</p>
        <gui:autoComplete
                id="dependedOn_autoComplete"
                resultName="sizes"
                labelField="size"
                idField="id"
                controller="demo"
                action="sizesAsJSON"
                forceSelection="true"
                useShadow="true"
        />
<gui:autoComplete
        id="dependsOn"
        resultName="dogs"
        labelField="type"
        idField="id"
        controller="demo"
        action="dogsAsJSON"
        forceSelection="true"
        dependsOn="dependedOn_autoComplete"
        useShadow="true"
/>
    </div>

    

    <div style="border: solid 1px black; background: #F3FC9F; padding: 20px; width: 300px">
        <p>This dependant pair use the id as thier discriminator, not the selected value.  The second autoComplete also specifies a param key label to expect on the server.</p>
        <gui:autoComplete
                id="dependedOn_autoComplete_byId"
                resultName="sizes"
                labelField="size"
                idField="id"
                controller="demo"
                action="sizesAsJSON"
                forceSelection="true"
                useShadow="true"
        />
        <gui:autoComplete
                id="dependsOnById"
                resultName="dogs"
                labelField="type"
                idField="id"
                controller="demo"
                action="dogsAsJSONUsingId"
                forceSelection="true"
                dependsOn="[
                    label:'size',
                    value:'dependedOn_autoComplete_byId',
                    useId:true
                ]"
                useShadow="true"
        />
    </div>

</body>
</html>